<template>
  <q-dialog
    v-model="isVisible"
    persistent
    class="call-invite-dialog"
    @hide="handleReject"
  >
    <q-card class="call-invite-card">
      <div class="call-invite-container">
        <!-- 顶部信息栏 -->
        <div class="call-invite-header">
          <div class="call-info">
            <q-avatar 
              size="48px" 
              class="call-avatar"
              :style="getAvatarStyle(inviteData.fromUserId)"
            >
              {{ getUserInitial(inviteData.fromUserId) }}
            </q-avatar>
            <div class="call-details">
              <div class="call-title">{{ inviteData.fromUserName }}</div>
              <div class="call-status">
                <q-icon name="sync" class="status-icon rotating" size="14px" />
                <span class="status-text">呼叫中</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间内容区域 -->
        <div class="call-invite-content">
          <div class="call-invite-indicator">
            <q-icon 
              :name="inviteData.isVoiceOnly ? 'phone_in_talk' : 'videocam'" 
              size="48px" 
            />
            <span>{{ inviteData.isVoiceOnly ? '语音通话' : '视频通话' }}</span>
          </div>
          <div class="call-invite-timer">
            <q-icon name="schedule" size="16px" />
            <span>{{ remainingTime }}秒</span>
          </div>
        </div>

        <!-- 底部操作按钮 -->
        <div class="call-invite-actions">
          <div class="controls-row">
            <div class="control-item">
              <q-btn
                round
                unelevated
                class="control-btn reject-btn"
                icon="call_end"
                size="lg"
                @click="handleReject"
              />
              <span class="control-label">拒绝</span>
            </div>
            <div class="control-item">
              <q-btn
                round
                unelevated
                class="control-btn accept-btn"
                :icon="inviteData.isVoiceOnly ? 'phone_in_talk' : 'videocam'"
                size="lg"
                @click="handleAccept"
              />
              <span class="control-label">接听</span>
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, onUnmounted } from 'vue'
import { getAvatarStyle } from '@/utils/avatar'

interface CallInviteData {
  fromUserId: string
  fromUserName: string
  isVoiceOnly: boolean
  messageId: string
  timeout: number // 超时时间（秒）
}

const props = defineProps<{
  inviteData: CallInviteData | null
  getUserInitial: (userId: string) => string
}>()

const emit = defineEmits<{
  'accept': [data: CallInviteData]
  'reject': [data: CallInviteData]
  'timeout': [data: CallInviteData]
}>()

const isVisible = computed({
  get: () => props.inviteData !== null,
  set: (value) => {
    if (!value && props.inviteData) {
      handleReject()
    }
  }
})

const remainingTime = ref(60)
let timer: number | null = null

const startTimer = () => {
  if (!props.inviteData) return
  
  remainingTime.value = props.inviteData.timeout || 60
  
  if (timer) {
    clearInterval(timer)
  }
  
  timer = window.setInterval(() => {
    remainingTime.value--
    
    if (remainingTime.value <= 0) {
      handleTimeout()
    }
  }, 1000)
}

const stopTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

const handleAccept = () => {
  if (props.inviteData) {
    stopTimer()
    emit('accept', props.inviteData)
  }
}

const handleReject = () => {
  if (props.inviteData) {
    stopTimer()
    emit('reject', props.inviteData)
  }
}

const handleTimeout = () => {
  if (props.inviteData) {
    stopTimer()
    emit('timeout', props.inviteData)
  }
}

watch(() => props.inviteData, (newData) => {
  if (newData) {
    startTimer()
  } else {
    stopTimer()
  }
}, { immediate: true })

onUnmounted(() => {
  stopTimer()
})
</script>

<style lang="sass" scoped>
.call-invite-dialog
  .q-dialog__inner
    padding: 0 !important
    display: flex
    align-items: center
    justify-content: center
    background: transparent !important

  .q-dialog__backdrop
    background: rgba(0, 0, 0, 0.5) !important

.call-invite-card
  background: transparent !important
  box-shadow: none !important
  width: 450px
  min-width: 450px
  max-width: 450px

.call-invite-container
  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%)
  color: #FFFFFF
  display: flex
  flex-direction: column
  position: relative
  overflow: hidden
  border-radius: 20px
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5)
  min-height: 380px

// 顶部信息栏（与接听后通话界面一致）
.call-invite-header
  display: flex
  justify-content: space-between
  align-items: center
  padding: 20px 24px
  background: rgba(0, 0, 0, 0.3)
  backdrop-filter: blur(20px)
  -webkit-backdrop-filter: blur(20px)
  flex-shrink: 0
  z-index: 100
  position: relative
  border-bottom: 1px solid rgba(255, 255, 255, 0.08)

  .call-info
    display: flex
    align-items: center
    gap: 16px

    .call-avatar
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3)
      border: 3px solid rgba(255, 255, 255, 0.2)
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)

  .call-details
    .call-title
      font-size: 18px
      font-weight: 500
      margin-bottom: 4px
      color: #FFFFFF
      letter-spacing: 0.3px

    .call-status
      display: flex
      align-items: center
      gap: 8px
      font-size: 13px
      color: rgba(255, 255, 255, 0.7)

      .status-icon
        &.rotating
          animation: rotate 1.5s linear infinite
          color: rgba(255, 255, 255, 0.7)

      .status-text
        font-weight: 400
        letter-spacing: 0.2px

// 中间内容区域
.call-invite-content
  flex: 1
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  padding: 40px 24px
  gap: 24px
  min-height: 0

.call-invite-indicator
  display: flex
  flex-direction: column
  align-items: center
  gap: 24px
  color: rgba(255, 255, 255, 0.8)
  font-size: 16px
  font-weight: 400

  .q-icon
    width: 48px
    height: 48px
    flex-shrink: 0
    display: flex
    align-items: center
    justify-content: center

.call-invite-timer
  display: flex
  align-items: center
  gap: 8px
  color: rgba(255, 255, 255, 0.8)
  font-size: 14px
  font-weight: 500

// 底部操作按钮（与接听后通话界面一致）
.call-invite-actions
  padding: 32px 16px 48px
  margin-top: 20px
  background: rgba(0, 0, 0, 0.3)
  backdrop-filter: blur(20px)
  -webkit-backdrop-filter: blur(20px)
  flex-shrink: 0
  z-index: 100
  position: relative
  border-top: 1px solid rgba(255, 255, 255, 0.08)
  overflow: hidden
  box-sizing: border-box
  width: 100%

  .controls-row
    display: flex
    justify-content: center
    align-items: center
    gap: 16px
    flex-wrap: nowrap
    max-width: 100%
    width: 100%
    box-sizing: border-box
    padding: 0
    margin: 0
    overflow: visible

    .control-item
      display: flex
      flex-direction: column
      align-items: center
      justify-content: center
      gap: 12px
      flex-shrink: 0
      flex-grow: 0
      min-width: fit-content
      max-width: 100%
      box-sizing: border-box
      position: relative

      .control-label
        font-size: 12px
        color: rgba(255, 255, 255, 0.8)
        font-weight: 400
        text-align: center
        white-space: nowrap
        transition: color 0.3s ease
        overflow: hidden
        text-overflow: ellipsis
        max-width: 100%
        display: block

    .control-btn
      width: 56px
      height: 56px
      min-width: 56px
      max-width: 56px
      border-radius: 50%
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
      position: relative
      overflow: hidden
      border: none
      display: flex
      align-items: center
      justify-content: center
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3)
      flex-shrink: 0
      flex-grow: 0
      box-sizing: border-box
      margin: 0
      padding: 0

      :deep(.q-icon)
        width: auto
        height: auto
        flex-shrink: 0
        display: flex
        align-items: center
        justify-content: center
        font-size: inherit

      &:hover
        transform: scale(1.08) translateY(-2px)
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4)

      &.reject-btn
        background: #FF3B30
        color: white
        box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4)

        &:hover
          background: #FF5247
          box-shadow: 0 8px 24px rgba(255, 59, 48, 0.5)

      &.accept-btn
        background: #07C160
        color: white
        box-shadow: 0 6px 20px rgba(7, 193, 96, 0.4)

        &:hover
          background: #06B050
          box-shadow: 0 8px 24px rgba(7, 193, 96, 0.5)

// 旋转动画
@keyframes rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)
</style>

